<ion-header>
    <header-component>
        <ion-toolbar>
            <ion-buttons class="button-left">
                <img navBackButton src="assets/imgs/return.svg" alt="">
            </ion-buttons>
            <ion-title>控制</ion-title>
        </ion-toolbar>
        <alarm-tab [functionList]="functionList" (changeAlarmTab)="changeAlarmTab($event)"></alarm-tab>
    </header-component>
</ion-header>

<ion-content class="controller">
    <section *ngIf="state === 'group'" class="groupController">
        <div class="groupItem" *ngFor="let data of groupParams;let i = index;" [ngClass]="{ isShown: data.isShown }">
            <div class="item-body" (click)=" data.params && data.params.length ? enterItem(i, data): ''">
                <span class="item-title">{{ data.controlGroupName }}</span>
                <p class="success" *ngIf="data.Finished && data.successed">执行成功</p>
                <p class="fail" *ngIf="data.Finished && data.fail">执行失败</p>
                <button class="item-bt" (click)=" !data.executing? carryItem(i, data) : '' ">
                    <img *ngIf="data.executing" src="assets/imgs/home/controller/loading.gif" alt=""> <i *ngIf="!data.executing">执行</i></button>
            </div>
            <ul class="item-detail" *ngIf="data.isShown && data.params && data.params.length" [ngClass]="{ isShown: data.isShown}">
                <li *ngFor="let item of data.params">
                    <span>{{ item.deviceName }}</span>
                    <img src="assets/imgs/home/controller/todo.svg" alt="">
                    <p *ngIf="item.parameterId === 24">{{ item.val === 1? '开' : '关' }}</p>
                    <p *ngIf="item.parameterId !== 24">{{ '调为' + item.val + (item.unit || '') }}</p>
                </li>
            </ul>
        </div>
    </section>

    <section *ngIf="state === 'only'" class="onlyController">
        <div class="onlyItem" *ngFor="let data of onlyParams;let i = index;">
            <sub-title [subTitleName]='data.areaName' *ngIf='true' [noLine]="true"></sub-title>
            <div class="each-only" *ngFor="let item of data.Infos;let i = index;" (click)="goDevice(item, i, data);$event.stopPropagation();">
                <span>{{ item.deviceName }}</span>
                <p class="success" *ngIf="item.successed">下发指令成功</p>
                <p class="fail" *ngIf="item.fail">下发指令失败</p>
                <img *ngIf="item.executing" src="assets/imgs/home/controller/blueloading.gif" alt="">
                <div (click)="!item.executing ? changeStatu(item) : ''" [ngClass]="{ active: item.isOpen}">
                    <button></button>
                </div>
                <!-- <ion-toggle checked="{{ item.isOpen }}" [(ngModel)]="item.isOpen" (ionChange)="changeStatu(item)"></ion-toggle> -->
            </div>
        </div>
    </section>


</ion-content>